<template>
	<view class="box">
		<view class="from">
			<view class="tel">
				<image src="https://s1.ax1x.com/2022/11/25/zYGam8.png" mode=""></image>
				<input v-model="mobile" type="text" maxlength='11' placeholder="请输入手机号">
			</view>
			<view class="tel">
				<image src="https://s1.ax1x.com/2022/11/25/zYGwTg.png" mode=""></image>
				<input v-model="code" type="text" maxlength='6' placeholder="请输入验证码">
				<view class="get" @click="getCode" v-if="flagCode===true">
					获取验证码
				</view>
				<view class="get" @click="getCode" v-else>
					已发送 {{time}}
				</view>
			</view>
			<view class="tel">
				<image src="https://s1.ax1x.com/2022/11/25/zYGypn.png" mode=""></image>
				<input v-model="pass" :type="show?'password':'text'" placeholder="请输入6-12位新密码" class="pass">
				<image class="isshow" src="https://s1.ax1x.com/2022/11/25/zYtKmV.png" @click="isShow" mode="widthFix" v-if="show===true"></image>
				<image class="isshow" src="https://s1.ax1x.com/2022/11/25/zYYkx1.png" @click="isShow" mode="widthFix" v-else></image>
			</view>
		</view>
		<view class="btu" @click="updata">
			完成
		</view>
	</view>
</template>

<script>
	import {reqcode,updatapass} from '../utils/api.js'
	export default{
		data() {
			return {
				mobile: '',
				code: '',
				pass: '',
				time: 10,
				flagCode: true,
				interval: null,
				show:true
			}
		},
		methods:{
			// 获取验证码
			// 获取验证码
			async getCode() {
				if (!this.isTel) {
					uni.showToast({
						title: '手机号不能为空',
						icon: "error",
						duration: 2000
					});
					return false
				}
				this.flagCode = !this.flagCode
			
				
				let times = setInterval(() => {
					this.time--
					if (this.time === 0) {
						clearInterval(times)
						this.time = 10
						this.flagCode = true
					}
				}, 1000)
				
				let data = {
					mobile: this.mobile
				}
				let res=await api.Member.reqcode(data)
				console.log(res);
			
			},
			// 修改密码显示隐藏状态
			isShow(){
				this.show=!this.show
				
			},
			// 修改密码
			async updata(){
				// 会员登录（验证码登录方式）
				if (this.code == "" || this.mobile == "") {
					uni.showToast({
						title: "请输入验证码或手机号",
						icon: 'error'
					})
				} else {
					if (this.disabled === false) {
						uni.showToast({
							title: "请先获取验证码",
							icon: 'error'
						})
					} else {
						let obj = {
							mobile: this.mobile,
							code: this.code,
							pass:this.pass
						}
						let res = await api.Member.updatapass(obj)
						console.log(res);
						if (res.errCode == 10000) {
							uni.showToast({
								title: "修改成功",
								icon: 'success',
								duration:2000
							})
							uni.reLaunch({
								url: './login'
							})
							this.mobile = ""
							this.code = ""
							this.pass=''
						} else {
							uni.showToast({
								title: "修改失败,验证码不正确",
								icon: 'error',
								duration:2000
							})
						}
				
					}
				
				}
			}
		},
		computed: {
			isTel() {
				let reg = /^1\d{10}/
				return reg.test(this.mobile)
			},
			isCode(){
				let reg=/^\d{6}/
				return reg.test(this.code)
			}
		}
		
	}
</script>

<style lang="less" scoped>
	page{
		width: 100%;
		height: 100%;
		background-color: #f6f5f5;
	}
	.box{
		width: 100%;
		height: 100%;
		.from{
			width: 100%;
			height: 350rpx;
			background-color: #fff;
			padding: 20rpx;
			box-sizing: border-box;
			.tel{
				display: flex;
				align-items: center;
				width: 100%;
				height: 105rpx;
				border-bottom: 2rpx solid #f5f5f5;
				position: relative;
				input{
					width: 100%;
					height: 100%;
					font-size: 28rpx;
				}
				image{
					width: 35rpx;
					height: 40rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
				}
				.isshow{
					width: 40rpx;
					position: absolute;
					top: 40rpx;
					right: 40rpx;
				}
				.pass{
					border: 0;
					outline: 0;
				}
			}
			.tel .get{
				font-size: 28rpx;
				color: #1a8ee9;
				position: absolute;
				top: 35rpx;
				right: 40rpx;
			}
			.tel:nth-child(3){
				border: 0;
			}
		}
		.btu{
			width: 500rpx;
			height: 90rpx;
			background-color: #1f8fff;
			border-radius: 50rpx;
			text-align: center;
			line-height: 90rpx;
			color: #fff;
			margin-left: 125rpx;
			margin-top: 80rpx;
		}
	}
	
</style>